<template>
  <a-layout-header class="header">
    <div class="logo" >开发喵知识库</div>
    <a-row>
      <a-col :span="20">
        <a-menu
            v-model:selectedKeys="selectedKeys1"
            theme="dark"
            mode="horizontal"
            :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="/">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item key="/admin/user" v-if="loginUser.id">
            <router-link to="/admin/user">用户管理</router-link>
          </a-menu-item>
          <a-menu-item key="/admin/ebook" v-if="loginUser.id">
            <router-link to="/admin/ebook">电子书管理</router-link>
          </a-menu-item>
          <a-menu-item key="/admin/category" v-if="loginUser.id">
            <router-link to="/admin/category">分类管理</router-link>
          </a-menu-item>
          <a-menu-item key="/about">
            <router-link to="/about">关于我们</router-link>
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col :span="4">

        <a class="login-menu" @click="showLoginModal" v-show="!loginUser.id">
          <span>登录</span>
        </a>
        <a-popconfirm
            title="确认要退出登录吗？"
            ok-text="是"
            cancel-text="否"
            v-if="loginUser.id"
            :class="{'login-menu':true}"
            @confirm="logout"
        >
          <span>退出登录</span>
        </a-popconfirm>
        <a class="login-menu" v-show="loginUser.id">
          <span>您好： {{loginUser.name}}</span>
        </a>
      </a-col>
    </a-row>
  </a-layout-header>

  <a-modal
      title="登录"
      v-model:visible="loginVisible"
      :confirm-loading="loginConfirmLoading"
      @ok="loginHandleOk"
      okText="登录"
      cancelText="取消"
  >
    <a-form :model="user" :label-col="{span: 6}" :wrapper-col="{span:14}">
      <a-form-item label="用户名">
        <a-input v-model:value="user.username" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-model:value="user.password" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {computed, ref} from "vue";
import axios from "axios";
import {message} from "ant-design-vue";
import store from "@/store/index.js";

export default {
  name: "the-header",
  setup(){
    // 登录
    const user = ref({});
    const loginVisible = ref(false);
    const loginConfirmLoading = ref(false);

    // 登录用户信息
    const loginUser = computed(() => store.state.loginUser);

    const showLoginModal = () =>{
      loginVisible.value = true;
    }

    const loginHandleOk = () =>{
      loginConfirmLoading.value = true;
      user.value.password = hexMd5(user.value.password + MD5_KEY);
      axios.post("/user/login", user.value).then( (resp) => {
        loginVisible.value = false;
        loginConfirmLoading.value = false;
        if (resp.data.code == 200) {
          store.commit("setLoginUser", resp.data.data);
        } else{
          message.error(resp.data.message)
        }
      });
    }

    // 退出
    const logout = () => {
      axios.get("/user/logout/" + loginUser.value.token).then( (resp) => {
        if (resp.data.code == 200) {
          message.success("退出成功")
          store.commit("setLoginUser", {});
        } else{
          message.error(resp.data.message)
        }
      })
    }
    return{
      selectedKeys1: ['/'],
      loginVisible,
      loginConfirmLoading,
      loginHandleOk,
      showLoginModal,
      user,
      loginUser,
      logout
    }
  }
}
</script>

<style scoped>
.login-menu {
  float: right;
  color: white;
  padding-left: 10px;
  cursor: pointer;
}
.logo{
  width: 120px;
  height: 31px;
  float: left;
  color: white;
  font-size: 18px;
}
</style>